<%--
  Created by IntelliJ IDEA.
  User: LUOLIANG
  Date: 2016/6/17
  Time: 21:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/path.jsp" %>
<html>
<head>
    <title>记点滴微信平台</title>
    <%@include file="../common/wechatcss.jsp" %>
    <style>
        .mui-card .mui-control-content {
            padding: 10px;
        }

        .mui-control-content {
            height: 150px;
        }

        #promptBtn {
            font-size: 30px;
        }
    </style>
</head>
<body ms-controller="shoppinglistController">
<header class="mui-bar mui-bar-nav">
    <a id="promptBtn" class="mui-icon mui-icon-compose mui-pull-left"></a>
    <h1 class="mui-title">购物便签</h1>
</header>
<div class="mui-content">
    <div style="padding: 10px 50px 10px 50px;">
        <div id="segmentedControl" class="mui-segmented-control">
            <a class="mui-control-item mui-active" href="#item1">
                待处理（{{@todo}}）
            </a>
            <a class="mui-control-item" href="#item2">
                已完成（{{@finish}}）
            </a>
        </div>
    </div>
    <div>
        <div id="item1" class="mui-control-content mui-active">
            <ul id="OA_task_2" class="mui-table-view">
                <li class="mui-table-view-cell" ms-for="($index,el) in @todolist">
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-green  mui-icon mui-icon-checkmarkempty"
                           href="javascript:void(0)" ms-click="@Finish(el.id,$index)"></a>
                        <a class="mui-btn mui-btn-red mui-icon mui-icon-trash" href="javascript:void(0)"
                           ms-click="@del(el.id,$index)"> </a>
                    </div>
                    <div class="mui-slider-handle">
                        <strong>{{el.content}}</strong>
                        <span style="float: right">{{el.createtime}}</span>
                    </div>
                </li>
            </ul>
        </div>
        <div id="item2" class="mui-control-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" ms-for="($index,el) in @finishlist">
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red" ms-click="@del(el.id,$index)">删除</a>
                    </div>
                    <div class="mui-slider-handle">
                        <strong>{{el.content}}</strong>
                        <span style="float: right">{{el.createtime}}</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<%@include file="../common/wechatjs.jsp" %>
<script src="<%=path%>/myjs/wechat/shoppinglist.js"></script>
<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    (function ($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
//        $('#OA_task_1').on('tap', '.mui-btn', function(event) {
//            var elem = this;
//            var li = elem.parentNode.parentNode;
//            mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
//                if (e.index == 0) {
//                    li.parentNode.removeChild(li);
//                } else {
//                    setTimeout(function() {
//                        $.swipeoutClose(li);
//                    }, 0);
//                }
//            });
//        });
        document.getElementById("promptBtn").addEventListener('tap', function (e) {
            e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
            var btnArray = ['取消', '确定'];
            mui.prompt('', '如牙膏...', '输入待购买物品', btnArray, function (e) {
                if (e.index == 1) {
                    if (e.value == "") {
                        toastr.warning("未填写内容");
                    } else
                        shoppinglist.add(e.value);
                } else {

                }
            })
        });
    })(mui);
</script>
</body>

</html>
